<template>
    <div id="branch">
        <!-- 右侧直线 -->
        <div v-if="branch.straightRight" class="straight-right"></div>
        
        <div v-if="branch.straightLeft" class="straight-left"></div>
        <!-- 左下 -->
        <div v-if="branch.leftDown" class="left-down">
            <div class="left-down-one"></div>
        </div>
        <!-- 右下 -->
        <div v-if="branch.rightDown" class="right-down">
            <div class="right-down-one"></div>
        </div>
        <!-- 左侧上 -->
        <div v-if="branch.leftUp" class="left-up">
            <div class="left-up-one"></div>
            <div class="left-up-two"></div>
        </div>
        <!-- 右侧上 -->
        <div v-if="branch.rightUp" class="right-up">
            <div class="right-up-one"></div>
            <div class="right-up-two"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['branch'],
    data() {
        return {
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {},
    watch: {}
}
</script>
<style  lang="less" scoped>
@blue: #2d8cf0;
@roundSize: 108px;
@roundTop: 27px;
.straight-left {
    position: absolute;
    width: 54px;
    height: 1px;
    border-radius: 50%;
    z-index: 1;
    left: -54px;
    top: 27px;
    background: @blue;
}
.straight-right {
    position: absolute;
    width: 54px;
    height: 1px;
    border-radius: 50%;
    z-index: 1;
    right: -54px;
    top: 27px;
    background: @blue;
}
.right-up {
    position: absolute;
    width: @roundSize;
    height: @roundSize;
    border: 1px solid @blue;
    border-radius: 50%;
    right: -@roundSize / 2;
    top: -80px;
    z-index: -2;
    &-one {
        position: absolute;
        background: #fff;
        z-index: 999;
        width: @roundSize / 2;
        height: @roundSize / 2;
        top: -1px;
        right: -2px;
    }
    &-two {
        position: absolute;
        background: #fff;
        z-index: 999;
        width: @roundSize / 2;
        height: @roundSize / 2;
        top: @roundSize / 2;
        right: @roundSize / 2;
    }
}
.left-up {
    position: absolute;
    width: @roundSize;
    height: @roundSize;
    border: 1px solid @blue;
    border-radius: 50%;
    left: -(@roundSize+2) / 2;
    top: -80px;
    z-index: -2;
    &-one {
        position: absolute;
        background: #fff;
        z-index: 999;
        width: @roundSize / 2;
        height: @roundSize / 2;
        top: -2px;
        left: 0px;
    }
    &-two {
        position: absolute;
        background: #fff;
        z-index: 999;
        width: @roundSize / 2;
        height: @roundSize / 2;
        top: @roundSize / 2;
        left: @roundSize / 2;
    }
}
.left-down {
    position: absolute;
    width: @roundSize;
    height: @roundSize;
    border: 1px solid @blue;
    border-radius: 50%;
    left: -(@roundSize+2) / 2;
    top: @roundTop;
    z-index: -1;
    &-one {
        position: absolute;
        background: #fff;
        z-index: 999;
        width: @roundSize / 2;
        height: @roundSize / 2;
        top: @roundSize / 2;
        left: -1px;
    }
}
.right-down {
    position: absolute;
    width: @roundSize;
    height: @roundSize;
    border: 1px solid @blue;
    border-radius: 50%;
    right: -@roundSize / 2;
    top: @roundTop;
    z-index: -1;
    &-one {
        position: absolute;
        background: #fff;
        z-index: 999;
        width: @roundSize / 2;
        height: @roundSize / 2;
        top: @roundSize / 2;
        left: @roundSize / 2;
    }
}
</style>